<script setup>
import MenuBar from '../components/MenuBar.vue'
import {ref} from "vue";
import {getRankList} from "@/apis/rankList";
import {onMounted} from "vue";
import TopBar from "@/components/TopBar.vue";
import * as echarts from "echarts";

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }
    ]
};

option && myChart.setOption(option);

// const tableData = ref([
// ]);
// const tableColumns = ref([
//     { label: '热点关键词', prop: 'keyword' },
//     { label: '热度', prop: 'hot' },
//     { label: '出现词频', prop: 'tf' },
// ]);

// onMounted(async ()  =>{
//     try {
//         const response = await getRankList();
//         tableData.value = response.data;
//     } catch (e){
//         console.error(e)
//     }
// })
</script>

<template>
    <TopBar />
    <div id="page" >
        <div class="mainDomain">
            <div style="{height: 10%;width:100%;margin-top: 60px;}">
                <MenuBar/>
            </div>
            <div class="hotRecordView">
                <div id="myChart" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.mainDomain{
    height:100%;
    width:100%;
    position:fixed;
    background-size: 100% 100%;
}
.hotRecordView{
    width: 100%;
    height: 100%;
    /*background-size: 100% 100%;*/
    /*background: url("../assets/background.jpg") no-repeat;*/
    /*background-position: center;*/
}
.hotRecordTable{
    position: relative;
    width:70%;
    height: 60%;
    top:10%;
    left:15%;
}

.box {
    width: 24vw;
    height: 60vh;
    background-color: white;
}

.chart{
    z-index: 9;
}
/*#myChart{*/
/*    height: auto;*/
/*}*/
</style>
